<template>
  <div class="songs">
    <div class="songs__header">
      <i class="iconfont icon-wodetubiao-253"></i>
      <span>播放全部</span>
    </div>
    <ul> 
      <li v-for="(track,index) in tracks" :key="index" @click="toPlay(track)">
        <mSongsItemVue :song="track" :id="index"></mSongsItemVue>
      </li>
    </ul>
  </div>
</template>
<script setup>
import mSongsItemVue from "./m-songs-item.vue";
import { defineProps } from 'vue'
import { useRouter } from "vue-router";
defineProps({ 
  tracks:Array
})
const router = useRouter()
const toPlay = (val)=>{
  router.push({name:'Play', params:{ids:val.id}})
}

</script>
<style lang="stylus">
.songs
  display inline-block
  box-sizing border-box
  margin-top 20px
  background white
  width 100%
  border-top-left-radius 15px
  border-top-right-radius 15px
  box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
  padding 0 14px
  .songs__header
    margin-top 10px
    margin-bottom 20px
    i
      line-height 24px
      font-size 24px
      margin-right 10px
    span
      display inline-block
      height 24px
      font-size 16px
      line-height 16px
      font-weight 500
</style>